<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>订单详情</span>
        <el-button 
          style="float: right; padding: 3px 0" 
          type="text" 
          @click="goBack"
        >返回</el-button>
      </div>

      <!-- 订单基本信息 -->
      <el-descriptions title="订单基本信息" :column="3" border>
        <el-descriptions-item label="订单号">{{ form.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="平台订单号">{{ form.platformOrderNo }}</el-descriptions-item>
        <el-descriptions-item label="平台类型">
          <dict-tag :options="dict.type.fiscale_platform_type" :value="form.platformType"/>
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <dict-tag :options="dict.type.fiscale_order_status" :value="form.orderStatus"/>
        </el-descriptions-item>
        <el-descriptions-item label="报关状态">
          <dict-tag :options="dict.type.fiscale_customs_status" :value="form.customsStatus"/>
        </el-descriptions-item>
        <el-descriptions-item label="是否手动补录">
          <el-tag v-if="form.isManual == 1" type="warning">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="订单日期">{{ parseTime(form.orderDate) }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">{{ form.currency }} {{ form.totalAmount }}</el-descriptions-item>
        <el-descriptions-item label="支付状态">
          <dict-tag :options="dict.type.fiscale_payment_status" :value="form.paymentStatus"/>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 客户信息 -->
      <el-descriptions title="客户信息" :column="3" border style="margin-top: 20px;">
        <el-descriptions-item label="客户姓名">{{ form.customerName }}</el-descriptions-item>
        <el-descriptions-item label="客户邮箱">{{ form.customerEmail }}</el-descriptions-item>
        <el-descriptions-item label="客户电话">{{ form.customerPhone }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ form.paymentMethod }}</el-descriptions-item>
        <el-descriptions-item label="配送方式">{{ form.shippingMethod }}</el-descriptions-item>
        <el-descriptions-item label="物流跟踪号">{{ form.trackingNumber }}</el-descriptions-item>
      </el-descriptions>

      <!-- 地址信息 -->
      <el-descriptions title="地址信息" :column="2" border style="margin-top: 20px;">
        <el-descriptions-item label="收货地址" :span="2">
          <pre>{{ formatAddress(form.shippingAddress) }}</pre>
        </el-descriptions-item>
        <el-descriptions-item label="账单地址" :span="2">
          <pre>{{ formatAddress(form.billingAddress) }}</pre>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 商品明细 -->
      <div style="margin-top: 20px;">
        <h3>商品明细</h3>
        <el-table :data="form.orderItems" border style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center" />
          <el-table-column label="商品SKU" prop="productSku" width="120" />
          <el-table-column label="商品名称" prop="productName" min-width="200" />
          <el-table-column label="商品英文名称" prop="productNameEn" min-width="200" />
          <el-table-column label="规格" prop="variantTitle" width="120" />
          <el-table-column label="数量" prop="quantity" width="80" align="center" />
          <el-table-column label="单价" prop="unitPrice" width="100" align="right" />
          <el-table-column label="小计" prop="totalPrice" width="100" align="right" />
          <el-table-column label="重量(kg)" prop="weight" width="100" align="right" />
          <el-table-column label="HS编码" prop="hsCode" width="120" />
          <el-table-column label="申报价值" prop="customsValue" width="100" align="right" />
          <el-table-column label="原产国" prop="originCountry" width="100" />
        </el-table>
      </div>

      <!-- 其他信息 -->
      <el-descriptions title="其他信息" :column="2" border style="margin-top: 20px;">
        <el-descriptions-item label="备注">{{ form.notes }}</el-descriptions-item>
        <el-descriptions-item label="系统备注">{{ form.remark }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(form.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="更新人">{{ form.updateBy }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ parseTime(form.updateTime) }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { getOrder } from "@/api/fiscale/order";

export default {
  name: "OrderDetail",
  dicts: ['fiscale_platform_type', 'fiscale_order_status', 'fiscale_customs_status', 'fiscale_payment_status'],
  data() {
    return {
      form: {},
      loading: false
    };
  },
  created() {
    this.getOrderDetail();
  },
  methods: {
    getOrderDetail() {
      this.loading = true;
      const orderId = this.$route.params && this.$route.params.orderId;
      getOrder(orderId).then(response => {
        this.form = response.data;
        this.loading = false;
      });
    },
    formatAddress(addressJson) {
      if (!addressJson) return '';
      try {
        const addr = JSON.parse(addressJson);
        return `${addr.country || ''} ${addr.state || ''} ${addr.city || ''}\n${addr.address || ''}\n${addr.zipCode || ''}`;
      } catch (e) {
        return addressJson;
      }
    },
    goBack() {
      this.$router.push('/fiscale/order-list');
    }
  }
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  margin: 0;
}
</style>